$basesize: 14px;
$theme:dark;

@mixin blue-box{
  width:100px;
  height:40px;
  background-color: skyblue;
}

@mixin big-box($w:200px,$h:200px,$color:skbylue){
  width:$w;
  height:$h;
  background-color:$color;
}

.goods{
  width:100px;
  height:40px;
  background-color: skyblue;
}

.box {
  @if $theme == "light" {
      background-color:green;
  }
  @else if $theme == "dark"{
    background-color:gray;
  }
  display: flex;
  flex-direction: column;
  height: 100%;
  font-size: $basesize + 2;

  .header,.footer {
    height: .88rem;
    background-color: red;
    font-size: $basesize + 10;
  }

  .main {
    flex: 1;
    font-size: $basesize + 2;
    .title{
      @include blue-box;
    }

    .list{
      @include big-box($h:20px,$color:orange);
    }

    .price{
      @extend .goods;
      border:2px solid black;
    }

    @for $i from 1 through 3 {

      .listbox :nth-child(#{$i}){
        width:$i * 40px;
        height: 40px;
        background-color: tomato;
      }

    }

    

  }

}



